<template>
  <div class="TypePage">
    <!-- title -->
    <el-row>
      <el-col :span="24">
        <el-card>
          <div style="display: flex, line-height: 40px">
            订单编号:
            <el-input placeholder="请输入" style="width: 200px" />
            选择日期:
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px"
              >查询</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- main -->
    <el-row>
      <el-col :span="24"
        ><el-card body-style="min-height: 800px">
          <!-- 主体 -->
          <div class="mian-form">
            <template>
              <el-table :data="this.list" style="width: 100%">
                <el-table-column type="index" label="序号" />
                <el-table-column prop="orderNo" label="订单编号" width="180" />
                <el-table-column prop="skuName" label="商品名称" />
                <el-table-column prop="price" label="订单金额(元)">
                </el-table-column>
                <el-table-column prop="innerCode" label="设备编号" />
                <el-table-column prop="status" label="订单状态" />
                <el-table-column prop="createTime" label="订单日期" />
                <el-table-column label="操作">
                  <el-button type="text">查看详情</el-button>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- footer -->
          <div class="footer">
            <Footer :footerList="footerList" @up="up" @next="next" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Footer from '@/components/public/FtooTer.vue'
import { getOrderList } from '@/api/zhang/order'
export default {
  components: {
    Footer
  },
  data () {
    return {
      list: [],
      value2: '',
      reg: {
        pageIndex: 1,
        pageSize: 10
      },
      footerList: {},
      visible: false
    }
  },
  async created () {
    this.getList()
  },
  methods: {
    addFn () {
      this.visible = true
    },
    up () {
      this.reg.pageIndex--
      this.getList()
    },
    next () {
      this.reg.pageIndex++
      this.getList()
    },
    async getList () {
      const res = await getOrderList(this.reg)
      console.log(res)
      // console.log(this.footerList)
      this.footerList = res
      res.currentPageRecords.forEach((item) => {
        if (item.status === 0) {
          item.status = '创建'
        } else if (item.status === 1) {
          item.status = '支付完成'
        } else if (item.status === 2) {
          item.status = '出货成功'
        } else if (item.status === 3) {
          item.status = '出货失败'
        }
      })
      res.currentPageRecords.forEach((item) => {
        item.createTime = item.createTime.replace('T', ' ')
      })
      this.list = res.currentPageRecords
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.main-form {
  width: 100%;
}
</style>
